[day-4]流程判斷 - if、else if、else/whimsical 流程圖 介紹


Posted by Xiang on 2021-10-24

If條件判斷

if旁的括號裡是寫條件式
而大括號是符合條件後執行的內容

(由於若直接寫邏輯運算式可能日後會無法清楚得知條件內容
因此可以設一個布林值變數來放條件)
如下

//假設氣溫15度以下要穿外套 今天氣溫14度

let toDayDegress = 14; //今天氣溫14度 
let isWearJacket = toDayDegrees <= 15; //符合條件(若溫度低於15則穿外套)

    //條件式 true
if(isWearJacket){
    console.log("穿上外套 ");
    console.log("準備出門 ");
}

else

//小明想吃牛肉麵,價格為110
//但小明不知道自己錢包剩多少錢
//打開錢包前決定如果錢包錢不夠則回家吃飯

let wallet = 150; //錢包的錢
let beefNoodles = 110; //牛肉麵的錢

if(wallet>=beefNoodles){
 console.log("小明跑去吃牛肉麵")
 console.log("小明錢不夠,回家吃飯")

else if (可以多組)

if內的條件沒有符合但符合另一個條件時使用
可以寫在else的前面

if(a<b){ //主要條件
//執行內容
}else if(b>c){ //若未達成主要條件 則判斷另一個條件
//執行內容
}else{ //以上條件都沒有達成則執行這段
//執行內容
};

看完以上三種的介紹後 可以來實際試一下題目試做
先列出一些條件後 再想要怎麼用程式來實現流程判斷


完整範例題目

小明的習慣是
1.如果沒下雨,就不會帶雨具
2.但如果下毛毛雨,他會帶輕便雨衣
3.假使下普通的雨,他會帶折傘
4.如果颱風天豪雨,他會帶長傘

今天的天氣是毛毛雨,那小華會帶什麼雨具呢?

let todayWeater = "毛毛雨"; //今天天氣為毛毛雨

if (todayWeater=="沒有下雨"{
    console.log("小華不帶雨具")'
} else if (todatWeater=="毛毛雨"){
    console.log("帶了輕便雨衣")
} else if (todayWeater=="普通的雨"){
    console.log("帶了折傘")
} else if (todayWeater=="豪雨"){
    console.log("帶了長傘")
} else {
    console.log("遇到異常狀態")
}

whimsical介紹

新手常常遇上的問題是 學了很多語法
但是遇上較大的作業或作品 腦袋一片空白、不知從何下手
當遇到情境、解決的事情

應該做的事情:
步驟一、任務拆解
步驟二、流程設計

因此這邊推薦whimsical這個線上繪製流程圖的網站給大家
繪製流程圖官網:http://whimsical.com/

而這邊簡單介紹流程圖最重要的四個符號

1.流程符號


用來表達過程的次序,用一條線由一個符號連接去到另一個符號。

2.起止符號


用來表示程式或子程式的開始與完結。

3.程式


代表一系列程式去改變數值、形式、數據的位置。

4.決策判斷


用來按情況去決定下一步走向。通常以「是/否」或「真/假」值去決定。

基本上剛開始只要學會這四個符號就能應付大部分前期的流程圖了。

那以下也提供兩份流程圖的範例
1.

2.這份是有用到if else決策判斷的

3.if內還可以包if


#javascript #js #Front End #web front end







Related Posts

CS 50  Pointers

CS 50 Pointers

Git change specific commit message

Git change specific commit message

Auto Generate Insert Script without SQL Manager

Auto Generate Insert Script without SQL Manager


Comments